<!DOCTYPE html>
<html>
    <head>
        <title>Teste</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            body, .blocks {margin: 0; font-family: "Arial", verdana;}
            .block-1, .blocks-2 {float: left; top: 0}
            .block-1 {width: 250px; position: fixed; border-right: 1px solid red; height: 100%; background: #ffffcc; padding: 10px}
            .block-2 {width: auto; margin-left: 300px; margin-top: 25px; margin-right: 50px}
            .block-response, .sweetClick {}
            .subblock {border-bottom: 1px dashed gray; margin-bottom: 50px; border-bottom: 1px dashed gray;}
            h4 {color: green; text-decoration: underline; font-weight: bold;}
            h6 {}
            cite {background: yellow; padding: 5px; border: 1px dashed red}
            .code {background: #000000; color: white; padding: 15px; border: 1px dashed white; margin-bottom: 50px;}
            ul {list-style: none;}
            .hiperlink {padding-top: 15px; text-decoration: none}
        </style>
    </head>
    <body>
		<script>
			(function(i, s, o, g, r, a, m) {
				i['GoogleAnalyticsObject'] = r;
				i[r] = i[r] || function() {
					(i[r].q = i[r].q || []).push(arguments);
				}, i[r].l = 1 * new Date();
				a = s.createElement(o),
						m = s.getElementsByTagName(o)[0];
				a.async = 1;
				a.src = g;
				m.parentNode.insertBefore(a, m);
			})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
			ga('create', 'UA-36382746-1', 'ilines.com.br');
			ga('send', 'pageview');
		</script>
        <div class="blocks">
            <div class="block-1">                
                <div style="position: relative; height: 50px;">
                    <h1>Framework</h1>
                </div>
                <h3>Iniciando</h3>
                <ul>
                    <li><a href="#" class="sweetClick" data-listener="{'request':'sweetphp','action':'config'}" data-return=".block-response">Configurar</a></li>
                    <li><a href="#" class="sweetClick" data-listener="{'request':'sweetphp','action':'form'}" data-return=".block-response">Formulário</a></li>
                    <li><a href="#" class="sweetClick" data-listener="{'request':'sweetphp','action':'use'}" data-return=".block-response">Usar</a></li>
                </ul>
                <h3>Atributos</h3>
                <ul>
                    <li><a href="#id-data-action" onclick="document.title = 'Sweet PHP - Data Action'" class="sweetClick" data-listener="{'request':'sweetphp','action':'data-action'}" data-return=".block-response">Action</a></li>
                    <li><a href="#id-data-complete"  onclick="document.title = 'Sweet PHP - Data Complete'" class="sweetClick" data-listener="{'request':'sweetphp','action':'data-complete'}" data-return=".block-response">Complete</a></li>
                    <li><a href="#id-data-listener" class="sweetClick" onclick="document.title = 'Sweet PHP - Data Lisneter'" data-listener="{'request':'sweetphp','action':'data-listener'}" data-return=".block-response">Listener</a></li>
                    <li><a href="#id-data-loading" class="sweetClick" onclick="document.title = 'Sweet PHP - Data Loading'" data-listener="{'request':'sweetphp','action':'data-loading'}" data-return=".block-response">Loading</a></li>
                    <li><a href="#id-data-loading-class" class="sweetClick" onclick="document.title = 'Sweet PHP - Data Loading Class'" data-listener="{'request':'sweetphp','action':'data-loading-class'}" data-return=".block-response">Loading Class</a></li>
                    <li><a href="#id-data-loading-text" class="sweetClick" onclick="document.title = 'Sweet PHP - Data Loagin Text'" data-listener="{'request':'sweetphp','action':'data-loading-text'}" data-return=".block-response">Loading Text</a></li>
                    <li><a href="#id-data-param" class="sweetClick" onclick="document.title = 'Sweet PHP - Data Param'" data-listener="{'request':'sweetphp','action':'data-param'}" data-return=".block-response">Param(s)</a></li>
                    <li><a href="#id-data-request" class="sweetClick" onclick="document.title = 'Sweet PHP - Data Request'" data-listener="{'request':'sweetphp','action':'data-request'}" data-return=".block-response">Request</a></li>
                    <li><a href="#id-data-return" class="sweetClick" onclick="document.title = 'Sweet PHP - Data Return'" data-listener="{'request':'sweetphp','action':'data-return'}" data-return=".block-response">Return</a></li>
                    <li><a href="#id-data-update" class="sweetClick" onclick="document.title = 'Sweet PHP - Data Update'" data-listener="{'request':'sweetphp','action':'data-update'}" data-return=".block-response">Update</a></li>
                </ul>
                <h3>Eventos</h3>
                <ul>
                    <li><a href="#" class="sweetClick" data-listener="{'request':'sweetphp','action':'sweet-input-submit'}" data-return=".block-response">Submit</a></li>
                    <li><a href="#" class="sweetClick" data-listener="{'request':'sweetphp','action':'sweet-input-change'}" data-return=".block-response">Change</a></li>
                    <li><a href="#" class="sweetClick" data-listener="{'request':'sweetphp','action':'sweet-click'}" data-return=".block-response">Click</a></li>
                </ul>
            </div>
            <div class="block-2">
                <div class="block-response">
                    <ul>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-action" href="#">
                                <h4>Data Action (data-action)</h4>
                            </a>
                            <p>
                                Marcador utilizado para indicar o local qual método ou função irá receber o pedido AJAX.
                            </p>
                            <h6>Exemplos:</h6>                            
                            <p>No PHP: new SegurancaMB()->salvar();</p>
                            <p>Seguir o padrão, conforme exemplo.</p>
                            <div class="code">
                                <code>
                                    &lt;form class=&quot;sweetForm&quot;  name=&quot;myClassPHP&quot; &gt; <br /><br />

                                    &lt;input class=&quot;.sweetClick&quot; type=&quot;button&quot; data-action=&quot;salvar&quot; data-return=&quot;.myname&quot;&gt; Salvar.&lt;/button&gt; <br /><br />

                                    &lt;/form&gt;
                                </code>
                            </div>                           
                        </li>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-complete" href="#">
                                <h4>Data Complete (data-complete)</h4>
                            </a>
                            <p>
                                Método complete utiliza funções scripts externos após o término da requisição. Similar ao JSF.
                            </p>
                            <h6>Exemplos:</h6>
                            <div class="code">
                                <code>
                                    &lt;form class=&quot;sweetForm&quot;  name=&quot;myClassPHP&quot; &gt; <br /><br />

                                    &lt;input class=&quot;.sweetClick&quot; type=&quot;button&quot; data-listener=&quot;{&#039;request&#039;:&#039;segurancaMB&#039;,&#039;action&#039;:&#039;criaSessaoUsuario&#039;,&#039;usuario&#039;:&#039;Paulo&#039;}&quot; data-complete=&quot;getFunction1();getFunction2();getFunction3('config');alert('Sucesso')&quot; data-return=&quot;.myname&quot;&gt; Passar para sess&atilde;o usu&aacute;rio Paulo.&lt;/button&gt; <br /><br />

                                    &lt;/form&gt;
                                </code>
                            </div>
                        </li>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-listener" href="#">
                                <h4>Data Listener (data-listener)</h4>
                            </a>
                            <p>
                                Método listener é um tipo de ação que antecipa o submit form. Pode se passar parâmetros independentes no data-listener, antes de efetuar um submit ou um action.
                            </p>
                            <p>
                                Listener não retorna nenhum valor.
                            </p>
                            <h6>Exemplos:</h6>                            
                            <p>Caso eu queira antes de salvar um usuário ou adicionar um produto a um carrinho criar uma sessão, ou verificar o estado atual do código, utilizo o listener para essa ações antecipadas.;</p>
                            <div class="code">
                                <code>
                                    &lt;form class=&quot;sweetForm&quot;  name=&quot;myClassPHP&quot; &gt; <br /><br />

                                    &lt;input class=&quot;.sweetClick&quot; type=&quot;button&quot; data-listener=&quot;{&#039;request&#039;:&#039;segurancaMB&#039;,&#039;action&#039;:&#039;criaSessaoUsuario&#039;,&#039;usuario&#039;:&#039;Paulo&#039;}&quot; data-return=&quot;.myname&quot;&gt; Passar para sess&atilde;o usu&aacute;rio Paulo.&lt;/button&gt; <br /><br />

                                    &lt;/form&gt;
                                </code>
                            </div>
                        </li>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-loading" href="#"></a>
                            <p>
                                Class ou id onde será mostrado um preloader/texto durante a requisição ajax solicitada.
                            </p>
                            <h6>Exemplos:</h6>
                            <div class="code">
                                <code>
                                    &lt;form class=&quot;sweetForm&quot;  name=&quot;myClassPHP&quot; &gt; <br />

                                    &lt;style&gt; <br /><br />

                                    .pressLoaders {background: red; width: 50px; height: auto; display: block;} <br /><br />

                                    &lt;/style&gt; <br /><br />

                                    &lt;input class=&quot;.sweetClick&quot; type=&quot;button&quot; data-config=&quot;{parameters}&quot; data-loading-class=&quot;.pressLoaders&quot; data-loading=&quot;.loading&quot;&gt; Click &lt;/button&gt; <br /><br />

                                    &lt;span class=&#039;.loading&#039;&gt;&lt;span&gt; <br /><br />


                                    &lt;/form&gt;
                                </code>
                            </div>
                        </li>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-loading-class" href="#">
                                <h4>Data Loading Class (data-loading-class)</h4>
                            </a>
                            <p>
                                Adiciona a nova classe preloader ao componente referenciado.
                            </p>
                            <h6>Exemplos:</h6>
                            <div class="code">
                                <code>
                                    &lt;form class=&quot;sweetForm&quot;  name=&quot;myClassPHP&quot; &gt; <br />

                                    &lt;style&gt;  <br /> <br />

                                    .pressLoader {background: red; width: 50px; height: auto; display: block;} <br /> <br />


                                    &lt;style&gt;  <br /> <br />

                                    &lt;input class=&quot;.sweetClick&quot; type=&quot;button&quot; data-config=&quot;{parameters}&quot; data-loading-class=&quot;.pressLoader&quot; data-loading=&quot;.loading&quot;&gt; Click &lt;/button&gt;  <br /> <br />

                                    &lt;span class=&#039;loading&#039;&gt;&lt;span&gt;  <br /> <br />



                                    &lt;/form&gt;
                                </code>
                            </div>
                        </li>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-loading-text" href="#">
                                <h4>Data Loading Text (data-loading-text)</h4>
                            </a>
                            <p>
                                Execulta eventos click / change no complete da requisição Ajax.
                            </p>
                            <h6>Exemplos:</h6>
                            <p>Adiciona um texto ao componente referenciado.</p>
                            <div class="code">
                                <code>
                                    &lt;form class=&quot;sweetForm&quot;  name=&quot;myClassPHP&quot; &gt; <br />

                                    &lt;input class=&quot;.sweetClick&quot; type=&quot;button&quot; data-config=&quot;{parameters}&quot; data-loading-text=&quot;Waiting&quot; data-loading=&quot;.loading&quot;&gt; Click &lt;/button&gt;  <br /> <br />

                                    &lt;span class=&#039;loading&#039;&gt;&lt;span&gt; <br /> <br />

                                    &lt;/form&gt;
                                </code>
                            </div>
                        </li>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-param" href="#">
                                <h4>Data Param</h4>
                            </a>
                            <p>
                                Cria botões input de maneira organizada e segura.
                            </p>
                            <p>
                                Armazenar dados arbitrários associados com o elemento e / ou devolver o valor que foi definido especificado.
                            </p>
                            <h6>Exemplos:</h6>

                            <div class="code">
                                <code>
                                    &lt;?php <br /><br />

                                    class DataParam {...} <br /><br />
                                </code>
                            </div>
                            <p>Lista de marcações / parâmetros aceitos</p>
                            - data-action; <br />
                            - data-id. <br />
                            - data-listener; <br />
                            - data-complete; <br />
                            - data-config; <br />
                            - data-loading-text; <br />
                            - data-loading-class; <br />
                            - data-loading; <br />
                            - data-method; <br />
                            - data-request; <br />
                            - data-return; <br />
                            - data-type; <br />
                            - data-update; <br /><br /><br /><br />
                        </li>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-request" href="#">
                                <h4>Data Request (data-request)</h4>
                            </a>
                            <p>
                                Marcador utilizado para indicar o local qual classe controladora irá receber o pedido AJAX.
                            </p>
                            <h6>Exemplos:</h6>                            
                            <p>Ex. salvar, remover, alterar, excluir, listar. Seguir o padrão, conforme exemplo.                            </p>
                            <div class="code">
                                <code>
                                    &lt;form class=&quot;sweetForm&quot;  name=&quot;myClassPHP&quot; &gt; <br /><br />


                                    &lt;input class=&quot;.sweetClick&quot; type=&quot;button&quot; data-request=&quot;segurancaMB&quot; data-return=&quot;.myname&quot;&gt; Passar para sess&atilde;o usu&aacute;rio Paulo.&lt;/button&gt; <br /><br />

                                    &lt;/form&gt;
                                </code>
                            </div>
                            <p>segurancaMB => É no nome da classe controladora, bean, controller onde estão os métodos e ações.</p> 
                        </li>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-return" href="#">
                                <h4>Data-Return (data-return)</h4>
                            </a>
                            <p>
                                Elemento onde será recebido o resultado da requisição AJAX. Específicar o tipo de retorno na marcação data-type
                            </p>
                            <p>
                                Resultados retornados: Página HTML; HTML; JSON; Texto.
                            </p>
                            <p>
                                <cite>
                                    IMPORTANTE: É necessário específicar no elemento se é class ou id.
                                </cite>
                            </p>
                            <h6>Exemplos:</h6>                            
                            <p>Se for retorna para ID colocar {#+id} = #id, se for retorna para uma CLASS {.+class} = .class</p>
                            <div class="code">
                                <code>
                                    &lt;form class=&quot;sweetForm&quot;  name=&quot;myClassPHP&quot; &gt; <br /><br />

                                    &lt;input class=&quot;.sweetClick&quot; type=&quot;button&quot; data-config=&quot;{parameters}&quot; data-return=&quot;.myname&quot;&gt; Click &lt;/button&gt; <br /><br />

                                    &lt;span class=&#039;myname&#039;&gt;&lt;/span&gt; <br />

                                    &lt;/form&gt;
                                </code>
                            </div>
                            <p><b>Resultado do ajax = 'José'</b></p>                
                        </li>
                        <li class="subblock">
                            <a class="hiperlink" id="id-data-update" href="#">
                                <h4>Data-Update (data-update)</h4>
                            </a>
                            <p>
                                Execulta eventos click / change no complete da requisição Ajax.
                            </p>
                            <h6>Exemplos:</h6>                            
                            <p>Ao clicar no botão 1, dou um click no botão 2, após a requisição ter sido processada. Similar ao render/update do jsf.</p>
                            <div class="code">
                                <code>
                                    &lt;form class=&quot;sweetForm&quot; name=&quot;myClassPHP&quot; &gt; <br /><br />

                                    &lt;input class=&quot;.sweetClick&quot; type=&quot;button&quot; data-config=&quot;{parameters}&quot; data-update=&quot;idBtn1&quot;&gt; Click &lt;/button&gt; <br /><br />

                                    &lt;input id=&quot;idBtn1&quot; type=&quot;button&quot; onclick=&quot;alert(&#039;Hello!&#039;)&quot;&gt;Hello&lt;/button&gt; <br /><br />

                                    &lt;/form&gt; <br />
                                </code>
                            </div>              
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>
